import React, { Component } from 'react';
import { Card, Button, Table, Modal, Form, Input, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import LinkButton from './LinkButton';
import MemoryUtils from '../utils/MemoryUtils';
import AddUser from './AddUser';

const Item = Form.Item;


export default class User extends Component {
    state = {
        loading: false,
        userList: [],
        showStatus: 0
    }
    constructor(props) {
        super(props);
        this.formRef = React.createRef();
    }

    initColumns = () => {
        this.columns = [
            {
                title: '用户ID',
                dataIndex: 'openid',
            },
            {
                title: '用户名',
                dataIndex: 'username',
            },
            // {
            //     title: '操作',
            //     width: 300,
            //     render: (obj1) =>
            //         <span>
            //             <LinkButton
            //                 onClick={() => {
            //                     MemoryUtils.actical = obj1;
            //                     this.props.history.push('/recommend/detail')
            //                 }} >修改密码</LinkButton>
            //         </span>

            // },
        ]
    }
    getUsers = () => {
        fetch('http://82.157.94.115:2005/selectlogin')
            .then(res => res.json())
            .then(res => {
                this.setState({ userList: res.selectloginObj });
            })
    }
    componentWillMount() {
        this.initColumns();
    }

    componentDidMount() {
        this.getUsers();
    }

    handleOk = () => {
        const {setFieldsValue} = this.formRef.current;
        console.log(this.props);
        // setFieldsValue ({
        //     username: this.props.data.username,
        //     password: this.props.data.password
        // })
        fetch('http://82.157.94.115:2005/zhregister', {
            method: 'POST',
            body: JSON.stringify(setFieldsValue),
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(res => res.json())
            .then(res => {
                this.getUsers();
                message.success('用户添加成功！');
            })


    }

    handleCancel = () => {
        this.setState({
            showStatus: 0
        })
    }
    render() {
        const { showStatus, userList, loading } = this.state;
        // const extra = (
        //     <Button type='primary' onClick={() => { this.setState({ showStatus: 1 }) }}>
        //         <PlusOutlined />
        //         添加用户
        //     </Button>
        // )
        const formLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 18 }
        }
        return (
            <div>
                <Card  >
                    <Table
                        bordered={true}
                        columns={this.columns}
                        loading={loading}
                        dataSource={userList}
                        pagination={{ defaultPageSize: 10, showQuickJumper: true }}
                    />
                    <Modal
                        title={showStatus === 1 ? '添加用户' : '修改'}
                        visible={showStatus !== 0}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                    >
                        <Form {...formLayout} ref={this.formRef}>
                            <Item
                                label="用户名"
                                name='username'
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入用户名',
                                    },
                                ]}
                            >
                                <Input type='text' placeholder='请输入用户名' id='username' ></Input>
                            </Item>
                            <Item
                                label="密码"
                                name='password'
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入密码',
                                    },
                                ]}
                            >
                                <Input type='password' placeholder='请输入密码' id='password' ></Input>
                            </Item>
                        </Form>
                        {/* <AddUser ref={this.formRef} /> */}
                    </Modal>
                </Card>
            </div>
        )
    }
}
// extra={extra}
